<template>
  <div class="detail_comment">
    <div class="comment_title">
      <span>用户评价</span>
      <span>更多</span>
    </div>

    <div class="comment_user">
      <img :src="detailComment.user?detailComment.user.avatar:null" alt="">
      <span>{{detailComment.user?detailComment.user.uname:null}}</span>
    </div>

    <div class="comment_content">
      {{detailComment.content?detailComment.content:null}}
    </div>

    <div class="comment_desc">
      <span>{{detailComment.time?showtime:null}}</span>
      <span>{{detailComment.time?detailComment.style:null}}</span>
    </div>
  </div>
</template>

<script>
import {formatDate} from "../detail_utils"
export default {
  name: "DetailComment",
  props: {
    detailComment: {
      type: Object,
      default(){
        return {};
      }
    }
  },
  computed: {
    showtime(){
      let datetime = new Date(this.detailComment.time);
      return formatDate(datetime,"yyyy-MM-dd hh-mm-ss")
    }
  }
}
</script>

<style scpoed>
  .detail_comment{
    padding: 10px 0px;
    border-bottom: 5px solid #f6f6f6;
    border-top: 5px solid #f6f6f6;
  }

  .comment_title{
    font-size: 14px;
    border-bottom: 2px solid #f6f6f6;
    padding: 7px 10px;
    display: flex;
    justify-content: space-between;
  }

  .comment_user{
    padding: 7px 10px;
  }

  .comment_user img{
    width: 40px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 10px;
  }

  .comment_user span{
    vertical-align: middle;
    font-size: 13px;
  }

  .comment_content{
    font-size: 13px;
    font-weight: 200;
    padding: 5px 10px;
  }

  .comment_desc{
    font-size: 9px;
    font-weight: 100;
    padding: 5px 10px;
    display: flex;
    justify-content: space-between;
    margin: 5px 0px;
  }

  .comment_desc span{
    flex: 1;
  }
</style>